<template>
    <div class="page-container">
      <!-- 查询条件区域 -->
      <div class="search-bar">
        <el-input
          v-model="searchForm.keyword"
          placeholder="单编号/源单号/物流单号"
          clearable
          class="search-input"
        />
        <label class="search-label">日期：</label>
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          class="date-picker"
        />
        <label class="search-label">服务类型：</label>
        <el-select
          v-model="searchForm.serviceType"
          placeholder="全部"
          clearable
          class="select-item"
        >
          <el-option label="全部" value="" />
          <!-- 可根据实际需求补充更多选项 -->
        </el-select>
        <label class="search-label">物流状态：</label>
        <el-select
          v-model="searchForm.logisticsStatus"
          placeholder="全部"
          clearable
          class="select-item"
        >
          <el-option label="全部" value="" />
          <!-- 可根据实际需求补充更多选项 -->
        </el-select>
        <label class="search-label">物流公司：</label>
        <el-select
          v-model="searchForm.logisticsCompany"
          placeholder="请选择"
          clearable
          class="select-item"
        >
          <el-option label="请选择" value="" />
          <!-- 可根据实际需求补充更多选项 -->
        </el-select>
        <label class="search-label">源单类型：</label>
        <el-select
          v-model="searchForm.sourceOrderType"
          placeholder="全部"
          clearable
          class="select-item"
        >
          <el-option label="全部" value="" />
          <!-- 可根据实际需求补充更多选项 -->
        </el-select>
        <el-button type="primary" class="search-btn">查询</el-button>
      </div>
  
      <!-- 操作按钮区域 -->
      <div class="operation-bar">
        <el-button type="primary" @click="addSaleQuotation">新增</el-button>
        <el-button>轨迹订阅</el-button>
        <el-dropdown>
          <el-button>
            快递单打印
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <el-button>
            上门取件
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <el-button>
            审核
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button>删除</el-button>
      </div>
  
      <!-- 表格区域，设置横向滚动 -->
      <div class="table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{ backgroundColor: '#f5f7fa' }"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="操作"
            width="80"
          >
            <!-- 可根据实际需求添加操作按钮，如编辑、删除等 -->
            <template>
              <el-button type="text" size="small">操作</el-button>
            </template>
          </el-table-column>
          <!-- 表格1表头字段 -->
          <el-table-column
            prop="documentDate"
            label="单据日期"
          />
          <el-table-column
            prop="documentNo"
            label="单据编号"
          />
          <el-table-column
            prop="relatedSourceOrderNo"
            label="关联源单号"
          />
          <el-table-column
            prop="customerOrSupplier"
            label="客户/供应商"
          />
          <el-table-column
            prop="deliveryQuantity"
            label="发货数量"
          />
          <el-table-column
            prop="sourceOrderType"
            label="源单类型"
          />
          <el-table-column
            prop="serviceType"
            label="服务类型"
          />
          <el-table-column
            prop="logisticsOrderStatus"
            label="物流单状态"
          />
          <el-table-column
            prop="printType"
            label="打印类型"
          />
          <el-table-column
            prop="productType"
            label="产品类型"
          />
          <el-table-column
            prop="senderName"
            label="寄件人姓名"
          />
          <!-- 表格2表头字段 -->
          <el-table-column
            prop="senderName"
            label="寄件人姓名"
          />
          <el-table-column
            prop="senderPhone"
            label="寄件人电话"
          />
          <el-table-column
            prop="senderAddress"
            label="寄件人地址"
          />
          <el-table-column
            prop="receiverName"
            label="收件人姓名"
          />
          <el-table-column
            prop="receiverPhone"
            label="收件人电话"
          />
          <el-table-column
            prop="receiverAddress"
            label="收件人地址"
          />
          <el-table-column
            prop="estimatedFreight"
            label="预估运费"
          />
          <el-table-column
            prop="actualFreight"
            label="实际运费"
          />
          <el-table-column
            prop="itemName"
            label="物品名称"
          />
          <el-table-column
            prop="logisticsStatus"
            label="物流状态"
          />
          <el-table-column
            prop="logisticsUpdateTime"
            label="物流更新时间"
          />
          <!-- 表格3表头字段 -->
          <el-table-column
            prop="logisticsOrExpressCompany"
            label="物流/快递公司"
          />
          <el-table-column
            prop="logisticsOrExpressOrderNo"
            label="物流/快递单号"
          />
          <el-table-column
            prop="subscriptionStatus"
            label="订阅状态"
          />
          <el-table-column
            prop="biller"
            label="制单人"
          />
          <el-table-column
            prop="billTime"
            label="制单时间"
          />
          <el-table-column
            prop="lastModifier"
            label="最后修改人"
          />
          <el-table-column
            prop="lastModifyTime"
            label="最后修改时间"
          />
          <el-table-column
            prop="printCount"
            label="打印次数"
          />
          <el-table-column
            prop="deliveryMethod"
            label="交货方式"
          />
          <el-table-column
            prop="freightSettlement"
            label="运费结算"
          />
          <el-table-column
            prop="freightPaymentStatus"
            label="运费付款状态"
          />
        </el-table>
      </div>
  
      <!-- 分页区域 -->
      <div class="pagination-bar">
        <span class="total-count">共 {{ total }} 条</span>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          class="pagination"
        />
        <el-select
          v-model="pageSize"
          placeholder="条/页"
          class="page-size-select"
        >
          <el-option
            v-for="size in pageSizes"
            :key="size"
            :label="size"
            :value="size"
          />
        </el-select>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ArrowDown } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';

const router = useRouter();
const addSaleQuotation = () => {
  router.push({ name: 'logisticsServices' });
}
  
  
  // 定义响应式数据
  const searchForm = ref({
    keyword: '',
    dateRange: [],
    serviceType: '',
    logisticsStatus: '',
    logisticsCompany: '',
    sourceOrderType: ''
  });
  const tableData = ref([]); // 实际应根据不同表格请求对应数据，这里先模拟空
  const total = ref(0); // 模拟数据，实际根据接口返回
  const pageSize = ref(500);
  const pageSizes = ref([500, 1000]);
  </script>
  
  <style scoped>
  /* 页面容器样式 */
  .page-container {
    padding: 10px;
    height: 800px;
  }
  
  /* 搜索栏样式：让查询条件在一行显示，超出可横向滚动 */
  .search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: nowrap; 
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .search-bar::-webkit-scrollbar {
    display: none;
  }
  .search-label {
    margin-right: 5px;
    font-size: 12px;
    min-width: 60px; 
  }
  .search-input {
    width: 160px; 
  }
  .date-picker {
    width: 220px; 
  }
  .select-item {
    width: 120px; 
  }
  .search-btn {
    margin-left: 10px;
  }
  
  /* 操作栏样式 */
  .operation-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  /* 表格容器样式，保留横向滚动条 */
  .table-container {
    width: 100%;
    overflow-x: auto; /* 关键：开启横向滚动 */
    margin-bottom: 10px;
  }
  .custom-table {
    min-width: 5000px; /* 可根据实际表格宽度调整，确保内容超出时出现滚动条 */
  }
  
  /* 分页栏样式 */
  .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  .total-count {
    color: #666;
  }
  .page-size-select {
    width: 80px;
  }
  </style>